<style lang="scss" scoped>
.site_list {
  li {
    .bg28 {
      background: #2879ff;
      &.active {
        background: #e1e1e1;
      }
    }
    margin-top: 0.2rem;
    &:first-child {
      margin: 0;
    }
    .tags {
      padding: 0.12rem 0;
      .tag {
        width: 0.7rem;
        height: 0.26rem;
        border-radius: 0.26rem;
        font-size: 0.12rem;
      }
    }
  }
}
</style>

<template>
  <div class="site_list">
    <ul>
      <li class="padding-lr15 bgfff" v-for="(it,index) in siteList" :key="index" @click="sendSite(it)">
        <div class="font-16 padding-t15">{{it.name}}
          <span class="margin-l10">{{it.tel}}</span>
        </div>
        <div class="padding-tb15 border-b">{{it.provinceName}} {{it.cityName}} {{it.districtName}} {{it.detailed}}</div>
        <div class="flex-col flex-right cfff tags">
          <div class="tag flex-col flex-center flex-middle bg28" :class="{active:!it.isdefault}" @click.stop="setSite(it.thingCode,index,!it.isdefault)">
            <i class="iconfont icon-shouji margin-r5"></i>默认
          </div>
          <div class="tag flex-col flex-center flex-middle bgf4 margin-lr15" @click.stop="editSite(it.thingCode)">
            <i class="iconfont icon-shouji margin-r5"></i>编辑
          </div>
          <div class="tag flex-col flex-center flex-middle bgred" @click.stop="delSite(it.thingCode,index)">
            <i class="iconfont icon-shouji margin-r5"></i>删除
          </div>
        </div>
      </li>
    </ul>
    <footer class="box-center footer font-14 box-center">
      <div class="cfff box-center" @click="toRouter('add_site')">添加收获地址</div>
    </footer>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "site_list",
  data() {
    return {
      page: 0,
      pageSize: 5,
      totalPage: 0,
      siteList: []
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getSiteList();
    });
  },
  methods: {
    // 获取用户收获地址列表
    getSiteList(has = false) {
      let that = this,
        page,
        pageSize = this.pageSize;

      if (has) {
        page = that.page = ++that.page;
        if (page > this.totalPage) {
          this.layer("没有更多了", "m");
          return;
        }
      } else {
        page = that.page = 1;
      }

      this.http
        .get("address/list", {
          page: page,
          limit: pageSize
        })
        .then(res => {
          that.totalPage = Math.ceil(res.data.totalPage / pageSize);
          if (has) {
            that.siteList.push(res.data.list);
          } else {
            that.siteList = res.data.list;

            res.data.list.forEach((it,i)=>{
              
            })
          }
        })
        .catch(err => {});
    },
    // 编辑收获地址（修改）
    editSite(id) {
      this.$router.push({
        path: "/add_site",
        query: {
          id
        },
        meat: {
          title: "修改收获地址"
        }
      });
    },
    // 删除收获地址
    delSite(id, i) {
      let that = this;
      this.http
        .post("address/delete", {
          thingCode: id
        })
        .then(res => {
          that.siteList.splice(i, 1);
        })
        .catch(err => {});
    },
    //添加收获地址
    toRouter(url) {
      let has = false;
      if (!this.siteList.length) has = true;
      this.$router.push({
        path: `/${url}`,
        query: {
          has: has
        },
        meat: {
          title: "添加收获地址"
        }
      });
    },
    // 选择的地址
    sendSite(it) {
      this.setCache("sendSite", it);
      this.$router.back(-1);
      // this.toRouter();
    },
    /**
     * 设置默认收货地址
     * ID 收货地址的ID
     * I 当前收货地址在列表的下标
     */
    setSite(id, i, has) {
      if (has) return;
      let that = this;
      this.http
        .post("address/save", {
          isdefault: 0,
          thingCode: id
        })
        .then(res => {
          that.siteList.forEach((it, index) => {
            it.isdefault = 1;
            if (i === index) it.isdefault = 0; //修改当前为默认
          });
          that.layer("修改成功", "m");
        })
        .catch(err => {});
    }
  }
};
</script>


